<script setup lang="ts">
const text = `
# 简介
\`\`\`
//Vertex Shader
const vertex = \`
  void main() {
    // gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
;\`
\`\`\`
这里的 position 就是上文提到的几何体 attributes 里各顶点的坐标，它是三维向量类型 vec3，需要先变成 vec4 四维向量类型——即(x, y, z, w)4个分量的格式——因为有了第4个值 w=1.0 才能进行矩阵操作，实现旋转、平移、缩放，这一步通过乘以 modelMatrix 模型矩阵将原本模型以自身本地坐标定位的方式变成世界坐标里适当的位置和大小，从而实现想要的场景布局；场景有了，相机位置、视角的不同看到的画面也会不同，这一步通过乘以 viewMatrix 视图矩阵实现物体基于相机的位置，前两者可以简写成 modelViewMartix，最后再通过乘以 projectionMatrix 投影矩阵变换到剪裁空间，最终变成二维屏幕上渲染出来的效果

作者：古柳
链接：https://juejin.cn/post/7233359844974182437
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


### shader是什么？
shader是一个用GLSL编写的、运行在GPU的小程序，也就是着色器语言，我们可以通过shader来编写顶点着色器和片元着色器。
### shader在three.js中如何使用？
three.js提供了两种shader材质：[RawShaderMaterial](https://threejs.org/docs/index.html?q=raw#api/zh/materials/RawShaderMaterial) 和 [ShaderMaterial](https://threejs.org/docs/index.html?q=shader#api/zh/materials/ShaderMaterial)
- RawShaderMaterial：不内置uniforms和attributes
- ShaderMaterial：内置一些需要的参数

本站所有示例均使用的是ShaderMaterial。

---
在开始之前，掌握[Shader基础知识](https://gitee.com/zDawnING/ThreejsDocs/blob/master/Threejs%20Shader%20%E6%95%99%E7%A8%8B%E8%AE%B2%E8%A7%A3%E6%96%87%E6%A1%A3.md)、[GLSL的基础语法](https://zhuanlan.zhihu.com/p/349296191)是很有必要的。
`;
</script>

<template>
  <v-md-preview :text="text"></v-md-preview>
</template>

<style scoped>
</style>
